<template>
  <div class="layout-container">
    <header class="header"></header>
    <main class="main">
      <router-view></router-view>
    </main>
    <footer class="footer">
      <footer-bar></footer-bar>
    </footer>
  </div>
</template>
<script>
import FooterBar from '../components/FooterBar.vue'
export default {
  components: {
    FooterBar,
  },
}
</script>
<style lang="scss" scoped>
.layout-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 0.8rem;
  background: #eee;
}
.main {
  flex: 1;
  overflow: auto;
}
.footer {
  height: 0.8rem;
  // background:#ccc;
}
</style>
